<template>
  <div class="cart">
    <!-- 渲染购物车 -->
    <template v-if="cart.length">
      <van-swipe-cell
        v-for="product in cart"
        :key="product.id"
      >
        <van-card
          :price="product.price | money"
          :title="product.title"
          class="goods-card"
        >
          <template #thumb>
            <div class="custom-thumb">
              <van-checkbox
                checked-color="#ee0a24"
                icon-size="18px"
                :value="product.checked"
                @click="modifyChecked({id: product.id})"
              ></van-checkbox>
              <div class="van-image" style="width: 80%; height: 100%;">
                <img :src="product.image" class="van-image__img" style="object-fit: cover;">
              </div>
            </div>
          </template>
          <template #num>
            <van-stepper
              :value="product.amount"
              theme="round"
              button-size="18"
              @change="handleChange(product.id, $event)"
            />
          </template>
        </van-card>
        <template #right>
          <van-button
            square
            text="删除"
            type="danger"
            class="delete-button"
            @click="handleRemove(product.id)"
          />
        </template>
      </van-swipe-cell>
    </template>

    <!-- 空提示 -->
    <van-empty
      class="custom-image"
      image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
      description="登录后可同步购物车数据"
      v-else
    />

    <!-- 提交订单栏 -->
    <van-submit-bar
      :price="totalMoney"
      :button-text="`去结算(${totalAmount}件)`"
      @submit="$router.push('/confirm')"
    >
      <van-checkbox
        checked-color="#ee0a24"
        icon-size="18"
        :value="allChecked"
        @click="modifyAllChecked({allChecked: !allChecked})"
      >全选</van-checkbox>
      <template #tip>
        你的收货地址不支持同城送, <span>修改地址</span>
      </template>
    </van-submit-bar>
  </div>
</template>

<script>
import { mapMutations, mapGetters } from 'vuex'
export default {
  name: 'Cart',
  computed: {
    /**
     * 获取在 store 中保存的购物车数组
     */
    cart() {
      return this.$store.state.cartModule.cart
    },
    // allChecked() {
    //   return this.$store.getters['cartModule/allChecked']
    // },
    ...mapGetters('cartModule', ['allChecked', 'totalMoney', 'totalAmount']),
  },
  methods: {
    ...mapMutations('cartModule', ['removeFromCart', 'modifyAmount', 'modifyChecked', 'modifyAllChecked']),
    // 删除
    handleRemove(id) {
      // this.$store.commit('cartModule/removeFromCart', { id })
      this.removeFromCart({ id })
    },
    // 修改商品数量
    handleChange(id, value) {
      // this.$store.commit('cartModule/modifyAmount', { id, amount: value })
      this.modifyAmount({ id, amount: value })
    },
  },
}
</script>

<style lang="less" scoped>
  .cart {
    padding-bottom: 168px;
  }
  .goods-card {
    margin: 0;
    background-color: #fff;
  }

  .delete-button {
    height: 100%;
  }

  .custom-image .van-empty__image {
    width: 90px;
    height: 90px;
  }

  /deep/.van-card__thumb {
    width: 120px;
  }
  .custom-thumb {
    display: flex;
    justify-content: space-between;
  }
  /deep/.van-submit-bar__button {
    width: 120px;
  }
</style>
